<template>
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      text-color="#fff"
      :unique-opened="true"
  >
    <template v-for="item in menuData" :key="item.id">
      <template v-if="item.child">
        <el-sub-menu v-if="item.child" :index="item.id">
          <template #title>
            <el-icon v-if="item.meta?.icon">
              <component :is="item.meta.icon"/>
            </el-icon>
            <span>{{ item.title }}</span>
          </template>

          <template v-for="childItem in item.child" :key="childItem.id">
            <el-menu-item :index="childItem.id" :route="childItem.path" @click="menuClick(childItem)">
              <template #title>
                <el-icon v-if="childItem.meta?.icon">
                  <component :is="childItem.meta.icon"/>
                </el-icon>
                <span>{{ childItem.title }}</span>
              </template>
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item :index="item.id" :route="item.path" @click="menuClick(item)">
          <template #title>
            <el-icon v-if="item.meta?.icon">
              <component :is="item.meta.icon"/>
            </el-icon>
            <span>{{ item.title }}</span>
          </template>
        </el-menu-item>
      </template>

    </template>

    </el-menu>
</template>

<script lang="ts" setup>
import {getUserMenu} from "@/utils/user-utils.ts";
import {useRouter} from "vue-router";
import {onMounted} from "vue";

const router = useRouter();
const menuData = getUserMenu();

const menuClick  = async (item: any) => {
  router.push(item.path).then()
}

onMounted(() => {
  router.push('/welcome')
})
</script>
